<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import Avatar from './components/Avatar/index.vue'
import Login from './components/Login/index.vue'
import HeatMap from './components/HeatMap/index.vue'
import { useDataCountStore, useUserStore } from '@/store'

const dataCountStore = useDataCountStore()
dataCountStore.addGroup()

const userStore = useUserStore()
const yearSelected = ref<number>(new Date().getFullYear())

/** 设置年份按钮配置信息 */
const buttonConfig = reactive<{ year: number; selected: string }[]>([])
const getYearButtonConfig = () => {
  const keys = Object.keys(JSON.parse(JSON.stringify(dataCountStore.$state)))

  buttonConfig.length = 0
  for (let i = 0; i < keys.length; i++) {
    buttonConfig.push({
      year: Number(keys[i]),
      selected: ''
    })
  }
  buttonConfig[buttonConfig.length - 1]!.selected = 'btn-selected'
}
getYearButtonConfig()

/** 切换显示年份 */
const setButton = (year: number) => {
  yearSelected.value = year
  buttonConfig.forEach((item) => {
    if (item.year === year) {
      item.selected = 'btn-selected'
    } else {
      item.selected = ''
    }
  })
}

const isLogin = computed(() => {
  return userStore.$state.token === undefined ? Login : Avatar
})
</script>

<template>
  <div class="overflow-x-hidden overflow-y-auto container">
    <h1 class="mb-8 text-3xl font-bold">{{ $t('user.title') }}</h1>
    <div class="card">
      <p class="flex flex-col items-center">
        <Component :is="isLogin" />
      </p>
    </div>
    <div class="card">
      <h2 class="text-center text-xl">{{ $t('user.statistical') }}</h2>
      <div class="my-4 flex flex-wrap items-center justify-around">
        <p>
          {{ $t('user.statistical.create') }}
          <a-statistic
            class="number-task"
            :value="userStore.create"
            :value-from="0"
            :start="true"
            animation
          />
          {{ $t('user.statistical.suffix') }}
        </p>
        <p>
          {{ $t('user.statistical.done') }}
          <a-statistic
            class="number-done"
            :value="userStore.done"
            :value-from="0"
            :start="true"
            animation
          />
          {{ $t('user.statistical.suffix') }}
        </p>
      </div>
      <div class="btns">
        <button
          v-for="item of buttonConfig"
          :key="item.year"
          :class="item.selected"
          @click="setButton(item.year)"
        >
          {{ item.year }}
        </button>
      </div>
      <div class="mx-auto mt-4">
        <HeatMap :year="yearSelected" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  @apply flex flex-col max-h-full min-h-full rounded-tl-xl p-8 !max-w-full;
  @apply bg-gray-200 text-dark-600 dark:(bg-dark-700 text-gray-200);
}

.container::-webkit-scrollbar {
  width: 0;
}

@media (max-width: 768px) {
  .container {
    @apply rounded-none;
  }
}

.card {
  @apply rounded-md p-5 my-2;
  @apply bg-light-50 dark:bg-gray-800;
}

.btns {
  @apply flex flex-wrap justify-center;
}

.btns button {
  @apply rounded-md p-2 mx-4;
  @apply bg-light-50 dark:bg-gray-800;
}

.btns button:hover {
  @apply bg-green-50 dark:bg-gray-700;
}

.btn-selected {
  @apply !bg-green-100 dark:!bg-green-900;
}

:deep(.number-task .arco-statistic-value) {
  @apply text-blue-500;
}

:deep(.number-done .arco-statistic-value) {
  @apply text-green-500;
}
</style>
